<script setup lang="ts">
import { getCurrentInstance, ref, reactive, watch, onBeforeMount, onMounted, onUpdated, nextTick } from 'vue'
import { onBeforeRouteLeave } from 'vue-router'
import { Swiper, SwiperSlide } from 'swiper/vue'
import 'swiper/css'
import MeScroll from 'mescroll.js'
import 'mescroll.js/mescroll.min.css'
import HoverButtn from './admin/hoverButton.vue'
const { proxy } = getCurrentInstance()

/* ---- */
const logUser = proxy.$Store.get('logUser') || {}
const WXConfig = proxy.$Store.get('WXConfig') || {}
const forSys = proxy.$Sys || []

/* ---- */
const curkey = ref(proxy.$route.query.curIndex || 0)
const cures = ref([])
// ----
const user = reactive({
  info: '',
  telphone: proxy.$telPhone,
  // ----
  title: '',
  // ----
  share_title: proxy.$shareTitle,
  share_desc: proxy.$shareDesc,
  share_icon: proxy.$shareIcon,
  // ----
  regMemId: 0,
  forRegMem: false,
  // ----
  power: 1
})
// ----
const moveTime = 50
let showMarquee = null
// ----
const infoSch = ref(null)
const forSearch = ref(proxy.$Store.get('forSearch') || {})
// ----
let menuSwiper = null
// ----
const tbtns = ref([])
const tabs = ref([])
// ----
const forFree = 9 / 5
const setTrueStyle = ref({})
// ----
let myIndex = 0
let myProvince = null
const myCityData = ref([])
// ----
const tSpeed = 300
let bar = null
let clientWidth = 0
let navWidth = 0
let navSwiper = null
const navText = '全部区域'
// ----
const fold = reactive({
  count: 1,
  height: 0,
  info: ''
})
// --mescroll--
let noData = proxy.$Global.noData
let mescroll = null
const items = ref([])
const CompanyImgs = ref([])
/* ---- */
const sliding = ref()
const preImg = ref()
const layer = ref()
const layerBox = ref()

/* ---- */
const setAppTitle = (title) => {
  document.title = title
  // --利用iframe的onload事件刷新页面--
  const iframe = document.createElement('iframe')
  iframe.style.visibility = 'hidden'
  iframe.style.width = 0
  iframe.style.height = 0
  document.body.appendChild(iframe)
  nextTick(() => { document.body.removeChild(iframe) })
}
// --设置微信分享--
const setWebShare = (info) => {
  const forSn = proxy.$Store.get('SN')
  const currentUrl = window.location.href.split('?')[0]
  const shareLink = (Number(currentUrl.indexOf('sn=')) === Number(-1)) ? ((Number(currentUrl.indexOf('?')) === Number(-1)) ? currentUrl + '?sn=' + forSn : currentUrl + '&sn=' + forSn) : currentUrl
  // console.log(curTootBtnName.value);
  // console.log(curkey.value);
 
  let pageType = -1
  if(curTootBtnName.value == 'JXHZS'){
    pageType = 0
  }else if(curTootBtnName.value == 'WNFW'){
    pageType = 2
  }
  

  proxy.$WxTool.loadJsdk(WXConfig, (obj) => {
    if (!obj) return
    // ----
    obj.hideMenuItem()
    obj.showMenuList(['menuItem:share:appMessage', 'menuItem:share:timeline', 'menuItem:share:qq', 'menuItem:share:weiboApp', 'menuItem:favorite', 'menuItem:share:QZone'])
    // ----
    obj.share({
      title: info.title,
      desc: info.desc,
      link: shareLink+`&curIndex=${pageType}`,
      imgUrl: info.imgUrl
    })
  })
}
// ----
const initData = () => {
  const cityItems = []
  proxy.$City.forEach((item, index) => {
    cityItems.push({
      value: String(item.value),
      text: proxy.$Myfun.setText(item.text)
    })
    // ----
    if (String(item.text) === String(myProvince)) myIndex = index + 1
  })
  myCityData.value = cityItems
}
// --initSwiperData || changeSwiperData--
const onSwiper = (swiper) => { navSwiper = swiper }
const initSwiper = (index) => {
  if (Number(myCityData.value.length) === 0) return false
  // --初始化--
  if (!navSwiper.el.querySelector('.bar')) {
    const newBar = document.createElement('div')
    newBar.setAttribute('class', 'bar')
    newBar.innerHTML = '<span class="xw-anim"></span>'
    navSwiper.wrapperEl.appendChild(newBar)
  }
  bar = navSwiper.el.querySelector('.bar')
  navSwiper.slides[navSwiper.activeIndex].querySelector('span').style.color = '#3388ff'
  // --Nav的可视宽度--
  clientWidth = navSwiper.wrapperEl.offsetWidth
  navWidth = 0
  for (let i = 0; i < navSwiper.slides.length; i++) {
    navWidth += navSwiper.slides[i].offsetWidth
  }
  // --点击slide事件--
  navSwiper.on('tap', () => {
    const newItems = []
    if (navSwiper.slides[navSwiper.clickedIndex].querySelector('span').innerText !== String(navText)) newItems.push(navSwiper.slides[navSwiper.clickedIndex].querySelector('span').innerText)
    proxy.$Myfun.setSearchRes(proxy, newItems, ['province'], (result) => { forSearch.value = result })
  })
  // ----
  setTimeout(() => { swiperMescroll(index) }, 100)
}
const swiperMescroll = (index) => {
  const clickIndex = index
  const clickSlide = navSwiper.slides[clickIndex]
  const activeSlidePosition = navSwiper.slides[clickIndex].offsetLeft

  // --释放时导航移动过渡--
  bar.style.transitionDuration = tSpeed + 'ms'
  bar.style.width = clickSlide.offsetWidth + 'px'
  bar.querySelector('span').style.width = clickSlide.querySelector('span').offsetWidth + 'px'
  bar.style.transform = 'translateX(' + activeSlidePosition + 'px)'

  // --导航居中--
  const navSlideWidth = clickSlide.offsetWidth
  // --activeSlide距左边的距离--
  const navActiveSlideLeft = navSwiper.slides[clickIndex].offsetLeft

  navSwiper.setTransition(tSpeed)
  if (navWidth > clientWidth) {
    if (navActiveSlideLeft < (clientWidth - navSlideWidth) / 2) {
      navSwiper.setTranslate(0)
    } else if (navActiveSlideLeft > navWidth - (navSlideWidth + clientWidth) / 2) {
      navSwiper.setTranslate(clientWidth - navWidth)
    } else {
      navSwiper.setTranslate((clientWidth - navSlideWidth) / 2 - navActiveSlideLeft)
    }
  }

  navSwiper.slides.forEach((current) => { current.querySelector('span').style.color = '#111111' })
  clickSlide.style.transitionDuration = tSpeed + 'ms'
  clickSlide.querySelector('span').style.color = '#3388ff'
}
// ----
const onSwiperMenu = (swiper) => { menuSwiper = swiper }
const initmenuSwiper = (index) => {
  if (Number(curkey.value) === Number(cures.value.length - 1)) return false
  // --初始化--
  menuSwiper.slides.forEach((current) => { current.classList.remove('active') })
  if (menuSwiper.slides[index]) {
    menuSwiper.slides[index].classList.add('active')
    menuSwiper.slideTo(index)
  }
  // --点击slide事件--
  menuSwiper.on('tap', async () => {
    menuSwiper.slides.forEach((current) => { current.classList.remove('active') })
    menuSwiper.slides[menuSwiper.clickedIndex].classList.add('active')
    // ----
    curkey.value = menuSwiper.clickedIndex
    // ----
    curTootBtnName.value = 'JXHZS'
    await setDefault(curkey.value)
    proxy.$Myfun.setSearchRes(proxy, [], ['province'], (result) => { forSearch.value = result })
    // ----
    const forExtend = Number(menuSwiper.clickedIndex) > 0 ? { curIndex: menuSwiper.clickedIndex } : {}
    proxy.$Myfun.openPage(proxy, 'replace', proxy.$route.name, forExtend)
  })
}
// ----
const getTrueStyle = () => {
  if (proxy.$refs.forTrueWidth) {
    const imgEL = proxy.$refs.forTrueWidth
    const imgRatio = forFree
    setTrueStyle.value = { height: `${Math.round(imgEL.offsetWidth / imgRatio)}px` }
  }
}
// ----
const getFoldStyle = () => {
  if (proxy.$refs.forTrueHeight) fold.height = proxy.$refs.forTrueHeight.offsetHeight
}
// ----
const setMarquee = () => {
  if (proxy.$refs.forMarquee) {
    const el = proxy.$refs.forMarquee.querySelector('ul')
    const forLi = el.innerHTML
    if (Number(el.firstChild.offsetWidth) > Number(el.offsetWidth)) {
      el.innerHTML = forLi + forLi
      showMarquee = setInterval(marqueefun, moveTime)
    }
  }
}
const marqueefun = () => {
  if (proxy.$refs.forMarquee) {
    const el = proxy.$refs.forMarquee.querySelector('ul')
    if (Number(el.lastChild.offsetWidth) <= Number(el.scrollLeft)) {
      el.scrollLeft = el.scrollLeft - el.firstChild.offsetWidth
    } else {
      el.scrollLeft = el.scrollLeft + 1
    }
  }
}
const stopRolling = () => {
  if (showMarquee) {
    clearInterval(showMarquee)
    showMarquee = null
  } else {
    showMarquee = setInterval(marqueefun, moveTime)
  }
}
// ----
const setDefault = async (type) => {
  setTimeout(() => {
    getTrueStyle()
    // ----
    getFoldStyle()
  }, 100)
  // --获取招商招聘信息--
  const capitalItems = forSys.filter((item) => { return String(item.name) === 'market_capital' })
  if (Number(capitalItems.length) === 1) {
    await proxy.$Myfun.getJsonData(capitalItems[0].value, (resJson) => {
      const RJData = resJson[0] || {}
      console.log(RJData);
      CompanyImgs.value = RJData.company_imgs;
      // ----
      user.info = proxy.$Myfun.setText(RJData.remark)
      user.company_share_hotline = proxy.$Myfun.setText(RJData.company_share_hotline)
      // ----
      // user.title = proxy.$Myfun.setText(RJData.title)
      // if (Number(type) < Number(cures.value.length - 1) || Number(cures.value.length) === 1) {
      //   if (RJData.coop_share_title) user.share_title = proxy.$Myfun.setText(RJData.coop_share_title)
      //   if (RJData.coop_share_desc) user.share_desc = proxy.$Myfun.setText(RJData.coop_share_desc)
      // } else {
      //   if (RJData.team_share_title) user.share_title = proxy.$Myfun.setText(RJData.team_share_title)
      //   if (RJData.team_share_desc) user.share_desc = proxy.$Myfun.setText(RJData.team_share_desc)
      // }
      // if (RJData.share_img && Number(RJData.share_img.length) > 0) user.share_icon = RJData.share_img[0].image
      if(type == '-1'){
        curTootBtnName.value = 'QYJS'
      }else if(type == '0'){
        curTootBtnName.value = 'JXHZS'
      }/* else if(type == '2'){
        curTootBtnName.value = 'WNFW'
      } */
      
      // 根据当前底部tab切换分享数据
      if(curTootBtnName.value == 'QYJS'){
        if (RJData.company_title_name) user.title = proxy.$Myfun.setText(RJData.company_title_name)
        if (RJData.company_share_title) user.share_title = proxy.$Myfun.setText(RJData.company_share_title)
        if (RJData.company_share_desc) user.share_desc = proxy.$Myfun.setText(RJData.company_share_desc)
        if (RJData.company_share_imgs && Number(RJData.company_share_imgs.length) > 0) user.share_icon = RJData.company_share_imgs[0].image
      }else if(curTootBtnName.value == 'JXHZS'){
        if (RJData.title) user.title = proxy.$Myfun.setText(RJData.title)
        if (RJData.team_share_title) user.share_title = proxy.$Myfun.setText(RJData.team_share_title)
        if (RJData.team_share_desc) user.share_desc = proxy.$Myfun.setText(RJData.team_share_desc)
        if (RJData.team_img && Number(RJData.team_img.length) > 0) user.share_icon = RJData.team_img[0].image
      }else if(curTootBtnName.value == 'WNFW'){
        if (RJData.coop_share_title_name) user.title = proxy.$Myfun.setText(RJData.coop_share_title_name)
        if (RJData.coop_share_title) user.share_title = proxy.$Myfun.setText(RJData.coop_share_title)
        if (RJData.coop_share_desc) user.share_desc = proxy.$Myfun.setText(RJData.coop_share_desc)
        if (RJData.share_img && Number(RJData.share_img.length) > 0) user.share_icon = RJData.share_img[0].image
      }
    })
  }
  // --设置网页title--
  const forTitle = user.title || document.title
  setAppTitle(forTitle)
  // --设置微信分享功能--
  const forShare = {
    title: user.share_title,
    desc: user.share_desc,
    imgUrl: user.share_icon
  }
  setWebShare(forShare)
}
const curTootBtnName = ref("")
const setFootBtns = () => {
  tbtns.value = [{
        show: true,
        name: '业务员|经理人|合作商',
        nameType:"JXHZS",
        icon: 'fa fa-rectangle-history-circle-user',
        callback: async () => {
          curTootBtnName.value = 'JXHZS'
          curkey.value = 0
          // ----
          await setDefault(curkey.value)
          nextTick(() => { initmenuSwiper(curkey.value) })
          proxy.$Myfun.setSearchRes(proxy, [], ['province'], (result) => { forSearch.value = result })
          // ----
          await setFootBtns()
          // ----
          // const forExtend = Number(cures.value.length - 2) > 0 ? { curIndex: Number(cures.value.length - 2) } : {}
          proxy.$Myfun.openPage(proxy, 'replace', proxy.$route.name,{curIndex:0})

        }
      },
    {
    show: true,
    name: '为你服务',
    nameType:"WNFW",
    icon: 'fa fa-stars',
    callback: async () => {
      curTootBtnName.value = 'WNFW'
      curkey.value = Number(cures.value.length - 1)
      // ----
      await setDefault(curkey.value)
      nextTick(() => { initmenuSwiper(curkey.value) })
      proxy.$Myfun.setSearchRes(proxy, [], ['province'], (result) => { forSearch.value = result })
      // ----
      await setFootBtns()
      // ----
      const forExtend = Number(cures.value.length - 1) > 0 ? { curIndex: Number(cures.value.length - 1) } : {}
      proxy.$Myfun.openPage(proxy, 'replace', proxy.$route.name, forExtend)
    }
  }]
  let forCurTbtn = {
    show: true,
    name: '万域焊材',
    nameType:"QYJS",
    icon: 'fa fass fa-buildings',
    callback: async () => {
      curTootBtnName.value = 'QYJS'
      curkey.value = -1
      // ----
      await setDefault(curkey.value)
      // nextTick(() => { initmenuSwiper(curkey.value) })
      // proxy.$Myfun.setSearchRes(proxy, [], ['province'], (result) => { forSearch.value = result })
      // // ----
      // await setFootBtns()
      // ----
      proxy.$Myfun.openPage(proxy, 'replace', proxy.$route.name,{curIndex:-1})
    }
  }
  /* if (Number(cures.value.length - 1) > 0) {
    if (Number(curkey.value) < Number(cures.value.length - 1)) {
      forCurTbtn = {
        show: true,
        name: '联系电话',
        icon: 'fa fa-phone-volume',
        callback: () => { window.location.href = 'tel:' + user.telphone }
      }
    } else {
      forCurTbtn = {
        show: true,
        name: '业务团队',
        icon: 'fa fa-users',
        callback: async () => {
          curkey.value = 0
          // ----
          await setDefault(curkey.value)
          nextTick(() => { initmenuSwiper(curkey.value) })
          proxy.$Myfun.setSearchRes(proxy, [], ['province'], (result) => { forSearch.value = result })
          // ----
          await setFootBtns()
          // ----
          proxy.$Myfun.openPage(proxy, 'replace', proxy.$route.name)
        }
      }
    }
  } */
  if (forCurTbtn) tbtns.value.unshift(forCurTbtn)
}
const getCurrencyInfo = async (callback) => {
  // --获取系统设置无数据提示--
  const noDataItems = forSys.filter((item) => { return String(item.name) === 'market_noData' })
  if (Number(noDataItems.length) === 1) {
    proxy.$Myfun.getJsonData(noDataItems[0].value, (resJson) => {
      if (Array.isArray(resJson)) {
        resJson.some((item, index) => {
          if (String(item.id) === 'investRecruit' && Number(item.desc.length) > 0) noData = proxy.$Myfun.setText(item.desc)
        })
      }
    })
  }
  // --获取业务团队销售属性--
  const capitalItems = forSys.filter((item) => { return String(item.name) === 'market_capitalattrib' })
  if (Number(capitalItems.length) === 1) {
    await proxy.$Myfun.getJsonData(capitalItems[0].value, (resJson) => {
      const newItems = []
      resJson[0].list.forEach((item, index) => {
        newItems.push({
          text: proxy.$Myfun.setText(item.name),
          type: 'get',
          url: 'teams/index',
          data: {
            params: {
              'TeamsSearch[type]': 1,
              'TeamsSearch[status]': 1,
              // ----
              // 'TeamsSearch[attribute_arr]': ',' + item.id + ',',
              'TeamsSearch[attribute_arr]': item.id ,
              // ----
              sort: 'SORT_DESC'
            }
          }
        })
      })
      cures.value = newItems
    })
  }
  cures.value.push({
    text: '为你服务',
    type: 'get',
    url: 'teams/index',
    data: {
      params: {
        'TeamsSearch[type]': 2,
        'TeamsSearch[status]': 1,
        // ----
        sort: 'SORT_DESC'
      }
    }
  })
  // --获取分享者联系方式--
  if (proxy.$route.query.sn) {
    await proxy.$http.get('dealer/index', {
      params: { 'DealerSearch[sn]': proxy.$route.query.sn }
    }).then((res) => {
      const UData = res.items[0] || {}
      user.telphone = UData.tag || UData.telphone
    }).catch((err) => { proxy.$Myfun.forToast(layer.value, 'open', err) })
  }
  // ----
  await setDefault(curkey.value)
  // ----
  if (user.info) nextTick(() => { setMarquee() })
  // ----
  if (Number(Object.keys(logUser).length) > 0) {
    user.power = 2
    // --是否团队成员--
    const forMemData = {
      params: {
        'TeamsSearch[to_dealer_id]': logUser.id,
        'TeamsSearch[type]': 1,
        // ----
        page: 1,
        PageSize: 1
      }
    }
    await proxy.$Axios.all([
      proxy.$Axios.get('teams/index', forMemData)
    ]).then(proxy.$Axios.spread((memData) => {
      if (Number(memData.items.length) > 0) {
        user.regMemId = memData.items[0].id
        user.forRegMem = true
      }
    })).catch((err) => { proxy.$Myfun.forToast(layer.value, 'open', err) })
  }
  // ----
  tabs.value = [{
    name: '我要代理销售',
    class: 'xw-bgCL-20 xw-act xw-borCL-11',
    callback: () => {
      if (user.forRegMem) {
        proxy.$Myfun.openPage(proxy, 'push', 'CapitalUserReg', { id: user.regMemId })
      } else {
        const forPower = user.power
        switch (Number(forPower)) {
          case 1: {
            proxy.$Myfun.openPage(proxy, 'push', 'CapitalUserReg', { capitalType: 1,  })
            break
          }
          case 2: {
            proxy.$Myfun.openPage(proxy, 'push', 'CapitalUserReg')
            break
          }
        }
      }
    }
  }, {
    name: '我要合作共享',
    class: 'xw-bgCL-22 xw-act xw-borCL-12',
    callback: () => {
      const options = {
        type: 0,
        content: '<div style="padding: 1rem; line-height: 3rem; font-size: 2rem; font-weight: bold;">共享业务团队和销售渠道<br/>让你的产品快速分销</div><div class="xw-Tfg" style="padding: 1rem 0; line-height: 3rem; font-size: 1.6rem;">合作流程<br/>第一步：登录商务中心<br/>第二步：开通市场营销<br/>第三步：对接专职后勤</div>',
        button: [{
          text: proxy.$Global.layer.btnCancel
        }, {
          text: '商务中心',
          class: 'xw-color-24',
          callback: () => { proxy.$Myfun.openPage(proxy, 'push', 'UcenTer') }
        }]
      }
      proxy.$Myfun.isIndepth(layerBox.value, 'open', options)
    }
  }]
  // ----
  await setFootBtns()
  // ----
  callback && callback()
}
// --getData--
const startMeScroll = () => {
  mescroll = new MeScroll(proxy.$refs.dataScroll, {
    up: {
      callback: getListData,
      isBounce: false,
      page: { num: 0, size: 10 },
      htmlNodata: '<p class="upwarp-nodata">-- 到底啦 --</p>',
      noMoreSize: 10,
      toTop: {
        src: '/pics/mescroll-totop.png',
        offset: 1000
      },
      empty: {
        warpId: proxy.$refs.dataList,
        tip: noData
      }
    }
  })
}
const getListData = (page) => {
  if(curkey.value == -1) return;
  const extra = {
    'TeamsSearch[citys]': myProvince ? ',' + myProvince + ',' : undefined,
    'TeamsSearch[name]': Number(curkey.value) === Number(cures.value.length - 1) && infoSch.value ? infoSch.value : undefined,
    // ----
    page: page.num,
    PageSize: page.size
  }
  switch (String(cures.value[curkey.value].type)) {
    case 'post': {
      Object.assign(cures.value[curkey.value].data, extra)
      break
    }
    case 'get': {
      Object.assign(cures.value[curkey.value].data.params, extra)
      break
    }
  }
  // ----
  getListDataFromNet({
    forType: cures.value[curkey.value].type,
    forUrl: cures.value[curkey.value].url,
    forData: cures.value[curkey.value].data
  }, page.num, page.size, (curPageData) => {
    if (Number(curkey.value) < Number(cures.value.length - 1)) {
      setListDataOne(curPageData).then((result) => {
        mescroll.endSuccess(curPageData ? curPageData.length : 0, true)
        items.value = items.value.concat(result)
      })
    } else {
      setListDataTwo(curPageData).then((result) => {
        mescroll.endSuccess(curPageData ? curPageData.length : 0, true)
        items.value = items.value.concat(result)
      })
    }
  }, (resMsg) => {
    mescroll.endErr()
    proxy.$Myfun.forToast(layer.value, 'open', resMsg)
  })
}
const getListDataFromNet = (option, pageNum, pageSize, successCallback, errorCallback) => {
  if (Number(pageNum) === 1) {
    if (document.querySelector('.upwarp-nodata')) { document.querySelector('.upwarp-nodata').style.visibility = 'hidden' }
    items.value = []
  }
  // ----
  proxy.$http[option.forType](option.forUrl, option.forData).then((res) => {
    switch (String(option.forType)) {
      case 'post': {
        if (res.success) {
          successCallback && successCallback(res.datainfo)
        } else { errorCallback && errorCallback(res.message) }
        break
      }
      case 'get': {
        successCallback && successCallback(res.items)
        break
      }
    }
  }).catch((err) => { errorCallback && errorCallback(err) })
}
const getFoldState = () => {
  return new Promise((resolve, reject) => {
    nextTick(() => {
      const curFoldH = proxy.$refs.forTrueHeight.offsetHeight
      if (Number(curFoldH / fold.height) > Number(fold.count)) {
        resolve(true)
      } else {
        resolve(false)
      }
    })
  })
}
const setListDataOne = async (items) => {
  const newItems = []
  for (let i = 0; i < Number(items.length); i++) {
    const item = items[i]
    // ----
    let forSex = ''
    if (Number(item.gender) > 0) forSex = (Number(item.gender) === 1) ? 'fa fa-user-tie-hair xw-color-12' : 'fa fa-user-tie-hair-long xw-color-5'
    // ----
    let forImg = ''
    const advItems = []
    await proxy.$Myfun.getJsonData(item.img_json, (resJson) => {
      if (Number(resJson.length) > 0) forImg = resJson[0].image
      // ----
      resJson.forEach((theItem) => {
        advItems.push({
          msrc: theItem.image,
          src: theItem.image,
          width: theItem.width,
          height: theItem.height,
          alt: ''
        })
      })
    })
    // ----
    let forFold = false
    fold.info = proxy.$Myfun.setText(item.introduce)
    await getFoldState().then((result) => { forFold = result })
    // ----
    newItems.push({
      id: item.id,
      company_name: proxy.$Myfun.setText(item.company_name),
      name: proxy.$Myfun.setText(item.name),
      sexIcon: forSex,
      date: proxy.$Myfun.getDateShort(item.created_at),
      remark: fold.info,
      telphone: item.telphone,
      // ----
      image: forImg,
      advs: advItems,
      // ----
      isFold: forFold
    })
    // ----
    fold.info = ''
  }
  return newItems
}
const setListDataTwo = async (items) => {
  const newItems = []
  for (let i = 0; i < Number(items.length); i++) {
    const item = items[i]
    // ----
    let forSex = ''
    if (Number(item.gender) > 0) forSex = (Number(item.gender) === 1) ? 'fa fa-user-tie-hair xw-color-12' : 'fa fa-user-tie-hair-long xw-color-5'
    // ----
    let forImg = ''
    const advItems = []
    await proxy.$Myfun.getJsonData(item.img_json, (resJson) => {
      if (Number(resJson.length) > 0) forImg = resJson[0].image
      // ----
      resJson.forEach((theItem) => {
        advItems.push({
          msrc: theItem.image,
          src: theItem.image,
          width: theItem.width,
          height: theItem.height,
          alt: ''
        })
      })
    })
    // ----
    newItems.push({
      id: item.id,
      company_name: proxy.$Myfun.setText(item.company_name),
      company: proxy.$Myfun.setText(item.name),
      leader: proxy.$Myfun.setText(item.leader),
      sexIcon: forSex,
      remark: proxy.$Myfun.setText(item.introduce),
      telphone: item.telphone,
      // ----
      image: forImg,
      advs: advItems
    })
  }
  return newItems
}
const divScroll = (event) => { proxy.$Myfun.setImgToTop() }
// ----
const emptyInfo = (event) => {
  const curEL = event.currentTarget
  const input = curEL.parentElement.querySelector('input')
  input.value = ''
  input.dispatchEvent(new Event('input'))
  // ----
  getHeadFun(1)
}
// ----
const getHeadFun = (type, item) => {
  switch (Number(type)) {
    case 1: {
      const newItems = []
      newItems.push(infoSch.value)
      proxy.$Myfun.setSearchRes(proxy, newItems, ['infoSch'], (result) => { forSearch.value = result })
      break
    }
    case 2: {
      proxy.$Myfun.getTopH().then((result) => {
        const forSlideTop = result
        // ----
        const options = {
          type: 3,
          forall: { show: true, text: '不限区域', value: '' },
          boxTop: { top: forSlideTop + 'px' },
          slideName: 'slideDown',
          boxClass: 'SLB-box-down',
          floatClass: 'xw-float-W3',
          itemName: myProvince || '',
          title: '区域',
          align: { textAlign: 'center' },
          list: myCityData.value,
          callback: (info) => { proxy.$Myfun.setSearchRes(proxy, info, ['province'], (result) => { forSearch.value = result }) }
        }
        proxy.$Myfun.isIndepth(sliding.value, 'open', options)
      })
      break
    }
  }
}
const getAuditFun = async (type, item, event) => {
  switch (Number(type)) {
    case 1: {
      if (Number(item.advs.length) > 0) {
        const curEL = event.currentTarget
        const options = {
          actElement: curEL,
          addopt: {
            loop: true,
            dataSource: item.advs
          }
        }
        proxy.$Myfun.isIndepth(preImg.value, 'openPhotoSwipe', options)
      }
      break
    }
    case 2: {
      let forDesc = '<div style="line-height: 2.5rem; text-align: justify;"><b>' + item.company + '</b><div>'
      if (item.remark && Number(item.remark.length) > 0) forDesc = '<div style="line-height: 2.5rem; text-align: justify;"><b style="display: block; margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid #d7d7d7;">' + item.company + '</b>' + item.remark + '<div>'
      const options = {
        type: 3,
        content: forDesc
      }
      proxy.$Myfun.isIndepth(layerBox.value, 'open', options)
      break
    }
    case 3: {
      window.location.href = 'tel:' + item.telphone
      break
    }
    case 4: {
      item.callback && item.callback(item)
      break
    }
  }
}

/* ---- */
watch(() => forSearch.value, (newVal, oldVal) => {
  myProvince = newVal.province
  // ----
  myIndex = 0
  myCityData.value.some((item, index) => {
    if (String(item.text) === String(myProvince)) {
      myIndex = index + 1
      return true
    }
  })
  nextTick(() => { swiperMescroll(myIndex) })
  // --重新请求数据--
  mescroll.scrollTo(0)
  mescroll.resetUpScroll()
}, { deep: true })

/* ---- */
onBeforeMount(() => {
  myProvince = forSearch.value.province
  // ----
  initData()
})
onMounted(() => {
  getCurrencyInfo(() => {
    nextTick(() => { initSwiper(myIndex) })
    nextTick(() => { initmenuSwiper(curkey.value) })
    // --创建MeScroll对象--
    setTimeout(() => { 
      startMeScroll() 
      setTimeout(() => {
        document.querySelector(".mescroll-upwarp").style.display = 'none'
      }, 200);
    }, 500)
  })
  
})
onUpdated(() => { nextTick(() => { proxy.$Myfun.setSectionH() }) })
onBeforeRouteLeave(() => {
  if (mescroll) mescroll.destroy()
  proxy.$Store.remove('forSearch')
})
</script>

<template>
  <div>
    <header class="xw-bg-gray" v-show="curTootBtnName != 'QYJS'">
      <div class="xw-msg xw-flex xw-flex-align" v-if="user.info">
        <em class="far fa-volume-up xw-color-2"></em>
        <div class="forMarquee xw-flex-W1">
          <div ref="forMarquee" class="FMQ-con xw-act xw-flex xw-flex-align" @click="stopRolling">
            <ul class="xw-flex-W1">
              <li>{{user.info}}</li>
            </ul>
          </div>
        </div>
      </div>
      <!---->
      <div class="forTop xw-flex xw-flex-align" v-if="Number(curkey) === Number(cures.length - 1)">
        <div class="TOP-sch xw-bg-white xw-radius-3 xw-flex-W1 xw-flex xw-flex-align">
          <em class="far fa-search TOP-L"></em>
          <p class="xw-flex-W1"><input class="schText" type="text" placeholder="输入关键词找服务团队" v-model.trim="infoSch"/></p>
          <transition name="fade"><em class="fa fa-times-circle" @click="emptyInfo" v-if="infoSch"></em></transition>
          <span class="TOP-btn TOP-R xw-Lfg" @click="getHeadFun(1)">搜索</span>
        </div>
      </div>
      <!---->
      <div class="forCha xw-bgCL-11" v-else-if="Number(cures.length) > 1">
        <swiper class="FCA-menu" :slides-per-view="Number(cures.length - 1)" @swiper="onSwiperMenu">
          <template v-for="(item, index) in cures">
          <swiper-slide v-if="index < Number(cures.length - 1)"><div class="xw-flex"><p class="xw-anim xw-flex-W1 xw-flex xw-flex-center">{{item.text}}</p></div></swiper-slide>
          </template>
        </swiper>
      </div>
      <!---->
      <div class="forMenu xw-flex xw-flex-align" v-if="Number(myCityData.length) > 0">
        <div class="FMU-menu xw-flex-W1">
          <div class="FMU-box FMU-L FMU-R">
            <swiper :slides-per-view="'auto'" :freeMode="true" @swiper="onSwiper">
              <swiper-slide><span class="xw-middle">{{navText}}</span></swiper-slide>
              <swiper-slide v-for="(item, index) in myCityData"><span class="xw-middle">{{item.text}}</span></swiper-slide>
            </swiper>
          </div>
        </div>
        <a class="fa fa-list-ul FMU-icon xw-color-12 FMU-R xw-flex xw-flex-center" @click="getHeadFun(2)"></a>
      </div>
    </header>
    <div class="xw-section" v-if="curTootBtnName != 'QYJS'">
      <div ref="dataScroll" class="mescroll" @scroll="divScroll">
        <ul class="xw-flex xw-flex-column" :class="[Number(curkey) === Number(cures.length - 1) ? 'list-company' : 'list-user']" ref="dataList">
          <template v-if="Number(curkey) < Number(cures.length - 1)">
            <li class="xw-bg-white xw-Tfg" v-for="(item, index) in items">
              <div class="LUR-con xw-flex">
                <div class="LUR-img xw-radius-3 xw-act" @click="getAuditFun(1, item, $event)" v-if="item.image"><div class="xw-bgImg" :style="{ backgroundImage: 'url(' + item.image + ')' }"></div></div>
                <div class="LUR-com xw-flex-W1">
                  <div class="xw-flex xw-flex-align xw-ellipsis" @click="getAuditFun(1, item, $event)" v-if="item.name">
                    <em :class="item.sexIcon" v-if="item.sexIcon"></em>
                    <div class="LUR-name">{{item.name}}</div>
                    <div class="xw-flex-W1 xw-color-3">&nbsp;@{{item.company_name || ""}}</div>
                  </div>
                  <div class="LUR-desc xw-flex" v-if="item.remark">
                    <div class="xw-color-12 lxdh_div" v-if="curkey==1" @click="getAuditFun(3,item)">电话联系</div>
                    <input type="checkbox" :id="'check_' + index" class="xw-fold-handle">
                    <div class="xw-fold-text">
                      <label class="xw-fold-btn" :for="'check_' + index" v-if="item.isFold"></label>
                      {{item.remark}}
                    </div>
                  </div>
                </div>
              </div>
            </li>
          <div class="list-li list-li-fold"><div ref="forTrueHeight">{{fold.info}}</div></div>
          </template>
          <template v-else>
          <li class="xw-bg-white xw-radius-3" v-for="(item, index) in items">
            <div class="LUR-title xw-ellipsis">{{item.company}}</div>
            <div class="LUR-adv xw-act" :style="setTrueStyle" @click="getAuditFun(1, item, $event)" v-if="item.image"><div class="xw-bgImg" :style="{ backgroundImage: 'url(' + item.image + ')' }"></div></div>
            <div class="LUR-info xw-flex xw-flex-align">
              <div class="xw-flex-W1">
                <div class="LUR-leader xw-flex xw-flex-align" v-if="item.leader">
                  <span class="xw-color-20">业务负责：</span>
                  <div class="LUR-max xw-ellipsis">{{item.leader}}</div>
                  <em :class="item.sexIcon" v-if="item.sexIcon"></em>
                </div>
              </div>
              <a class="LUR-btn xw-Rfg" @click="getAuditFun(2, item)"><em class="fal fa-book-open-cover xw-color-1"></em></a>
              <a class="LUR-btn" @click="getAuditFun(3, item)"><em class="fal fa-phone-volume xw-color-3"></em></a>
            </div>
          </li>
          <div class="list-li list-li-img"><div ref="forTrueWidth"></div></div>
          </template>
          <p class="xw-flex xw-flex-center no_data" v-if="items.length==0">
            暂无关联数据欢迎洽谈合作！
          </p>
        </ul>
      </div>
    </div>

    <div class="xw-section xw-pbset" v-if="curTootBtnName == 'QYJS'">
      <div ref="dataScroll" class="mescroll" @scroll="divScroll" v-if="CompanyImgs.length>0">
        <!-- <ul class="xw-flex xw-flex-column" ref="dataList">
          
          <li class="xw-bg-white xw-Tfg" v-for="(item, index) in CompanyImgs">
            <div class="xw-flex">
              <div class="xw-act" v-if="item.image">
                <div class="xw-bgImg" :style="{ backgroundImage: 'url(' + item.image + ')' ,width:item.width+'px',height:item.height+'px'}"></div>
              </div>
            </div>
          </li>
        
        </ul> -->
        <div class="invit-list">
          <div v-for="(item, index) in CompanyImgs"><img :src="item.image"/></div>
        </div>
        
        <p class="xw-flex xw-flex-center">-- 到底啦 --</p>
      </div>
      <p class="xw-flex xw-flex-center no_data" v-if="CompanyImgs.length==0">
        暂无关联数据欢迎洽谈合作！
      </p>
    </div>
   
    <footer>
      <div class="tabs xw-foot-Tfg xw-flex">
        <!-- <div class="TAB-dbtn xw-flex-W1 xw-flex xw-flex-align">
          <div class="xw-radius-3 xw-flex-W1 xw-flex xw-flex-center" v-for="(item, index) in tabs" @click="getAuditFun(4, item)" :class="item.class">{{item.name}}</div>
        </div> -->
        <div class="xw-flex xw-flex-W1">
          <template v-for="(item, index) in tbtns">
            <template v-if="item.show">
              <a :class="{'active': item.nameType == curTootBtnName}" class="xw-flex-W1 xw-flex xw-flex-center" @click="getAuditFun(4, item)">
                <span><em :class="item.icon"></em>{{item.name}}</span>
              </a>
            </template>
          </template>
        </div>
      </div>
    </footer>
    <HoverButtn :user="user"></HoverButtn>
    <sliding-view ref="sliding"/>
    <preImg-view ref="preImg"/>
    <layer-view ref="layer"/>
    <layer-view ref="layerBox"/>
  </div>
</template>

<style scoped>
/* ---- */
.forTop { margin-bottom: -0.8rem; }

.forMenu { height: 4rem; }

/* ---- */
.xw-fold-text { max-height: 2rem; }
.xw-fold-btn:after { color: #888888; }

/* ---- */
.list-company li { position: relative; margin: 1rem 1rem 0; overflow: hidden; }
.list-user li { position: relative; overflow: hidden; }
.list-user li:before { left: 1rem; right: 1rem; }
.list-user li:nth-of-type(1):before { display: none; }
.LUR-con { padding: 1.2rem 1rem; }
.LUR-img { margin: 0 1rem 0 0; width: 5rem; height: 5rem; }
.LUR-top { height: 3rem; }
.LUR-top em { font-size: 1.6rem; margin-right: 0.5rem; }
.LUR-name { font-size: 1.7rem; font-weight: bold; }
.LUR-date { margin-left: 1rem; color: #000;}
.LUR-btns { padding: 1rem; }
.LUR-check { overflow: visible; }
.LUR-check div { overflow: visible; }
.list-li-fold { padding: 0 1rem 0 7rem; }
.list-li-fold div { min-height: 2rem; line-height: 2rem; text-align: justify; }
.LUR-title { padding: 1rem; line-height: 2.5rem; font-size: 1.7rem; font-weight: bold; text-align: justify; }
.LUR-info { padding: 1rem; }
.LUR-leader em { font-size: 1.6rem; margin-left: 0.5rem }
.LUR-max { max-width: 16rem; }
.LUR-btn { padding: 0 1.2rem; }
.LUR-btn em { font-size: 2rem; }
.LUR-btn:last-of-type { padding-right: 0; }
.list-li-img { margin: 0 1rem; }

/* ---- */
.TAB-abtn { margin: 0 0.5rem 0 -0.5rem; }

/* ---- */
.xw-msg { padding: 0.5rem 0 0.5rem 1rem; }

/* ---- */
.forMarquee { height: 100%; padding: 0 1rem; }
.FMQ-con { height: 100%; }
.FMQ-con ul { white-space: nowrap; overflow: hidden; }
.FMQ-con li { display: inline-block; }
.no_data{margin-top: 9vh;}
.lxdh_div{
  width: 10rem;
  border: 0.1rem solid #3388ff;
  text-align: center;
  border-radius: 1.4rem;
  margin-right: 1rem;
  height: 2rem;
}
.LUR-desc{
  margin-top: 0.5rem;
}
.invit-list img { width: 100%; }
</style>